<template>
	<div id="photoSphere" style="width: 100vw; height: 100vh">
		<photoSphereViewer
			style="width: 100vw; height: 100vh; overflow: hidden"
			ref="viewer"
			:currAlbumnIndex="activeAlbumnId"
			@select-marker="selectMarker"
			@update-has-gallery="updateHasGallery"
			@change-panel="changePanel"
			@changetoo-often="changetooOften"
			@play-mp3="playMp3"
		/>
		<div class="photo-sphere-bottom">
			<img class="img-bottom" src="../../assets/images/foot1.png" />
			<div class="photo-sphere-menu">
				<div v-for="(item, index) in menuList" :key="index" @click="menuClick(item.title)">
					<img :src="item.url" />
					<span>{{ item.title }}</span>
				</div>
			</div>
		</div>
		<a-modal v-model:visible="visible" style="width: 80%; height: 80%">
			<div class="box-wrap">
				<div class="box-wrap-content">
					<div class="box-wrap-content-message">
						<img src="../../assets/aaaa.png" />
						<p>
							党总支委由局机关党支部、监督指挥中心党支部、城乡规划建设监察大队党支部、环卫所党支部等四个党支部组成。党总支委由局机关党支部、
							党总支委由局机关党支部、监督指挥中心党支部、城乡规划建设监察大队党支部、环卫所党支部等四个党支部组成。党总支委由局机关党支部、
							党总支委由局机关党支部、监督指挥中心党支部、城乡规划建设监察大队党支部、环卫所党支部等四个党支部组成。党总支委由局机关党支部、
						</p>
					</div>
				</div>
			</div>
			<template #closeIcon>
				<img src="../../assets/PhotoSphere/close.png" />
			</template>
		</a-modal>
		<audio ref="audioRef"></audio>
	</div>
</template>

<script>
import photoSphereViewer from '../../components/PhotoSphereViewer/index.vue';
import { getImageUrl } from '../../utils/base.ts';
import uDialogModal from '../../components/panoramaDialog/index.js';
export default {
	components: { photoSphereViewer },

	data() {
		return {
			currAlbumnIndexSave: 1,
			video: {},
			visible: false,
			positionInfo: {},
			tooOften: false, //操作过于频繁
			markers: [],
			activeAlbumnId: 1,
			floor: 1,
			build: 1,
			hasGallery: true,
			hasMusic: true,
			showModal: false,
			showRadarModal: false,
			navList: [
				{ id: 1, name: '街区介绍' },
				{ id: 2, name: '业务服务' },
				{ id: 3, name: '主题特色' }
			],
			floorList: [
				{
					id: 1,
					name: 'F1'
				},
				{
					id: 2,
					name: 'F2'
				},
				{
					id: 3,
					name: 'F3'
				}
			],
			buildList: [
				{ id: 0, name: '请选择' },
				{ id: 1, name: '文友楼' },
				{ id: 2, name: '厚德楼' }
			],
			menuList: [
				{ url: getImageUrl('images/menu1.png'), title: '场景' },
				{ url: getImageUrl('images/menu2.png'), title: '音乐' },
				{ url: getImageUrl('images/menu3.png'), title: '全屏' },
				{ url: getImageUrl('images/menu4.png'), title: '全局' },
				{ url: getImageUrl('images/menu5.png'), title: '返回' }
			]
		};
	},
	created() {},
	mounted() {
		this.$refs.audioRef.src = getImageUrl('video/beijing.mp3');
	},
	methods: {
		playMp3() {
			if (this.$refs.audioRef.paused) {
				this.$refs.audioRef.play(); //audio.play();// 这个就是播放
			} else {
				this.$refs.audioRef.pause(); // 这个就是暂停
			}
		},
		menuClick(type) {
			console.log(type);
			switch (type) {
				case '音乐':
					this.playMp3();
					break;
				case '全屏':
					this.fullScreen();
					break;

				case '场景':
					this.toggleGallery();
					break;
				case '全局':
					this.$refs.viewer.galleryHide();
					this.$refs.viewer.initBigPhotos();
					break;
				case '返回':
					this.$router.back();
					break;
			}
		},
		//更新图库列表
		showViewerInfo() {
			this.$refs.viewer.getViewerInfo();
		},
		positionUpdateListener() {
			this.$refs.viewer.positionUpdateListener();
		},
		viewerfinishOneRound() {
			this.$refs.viewer.removePositionUpdateListener();
			this.showRadarModal = false;
			console.log('转完了呀');
		},
		updatePhotos() {},
		changeModal() {
			this.showViewerInfo();
			this.showModal = !this.showModal;
		},
		changePanel(bol) {
			this.hasGallery = bol;
		},
		changeBgmusic() {
			this.hasMusic = !this.hasMusic;
		},
		changetooOften(bol) {
			this.tooOften = bol;
		},

		//更新标记
		updateMarkers() {},
		setOptions(info) {
			const myViewer = this.$refs.viewer;
			myViewer.showPanel('description', '<div>' + info.name + '</div>');
		},
		changeFloor() {
			console.log(this.floor);
		},
		//图库切换
		toggleGallery() {
			if (this.hasGallery) {
				this.$refs.viewer.galleryHide();
			} else {
				this.$refs.viewer.galleryShow();
			}
			this.hasGallery = !this.hasGallery;
		},

		updateHasGallery(bol) {
			this.hasGallery = bol;
		},
		//切换全屏
		changeFullscreen() {
			this.$refs.viewer.handleToggleFullscreen();
		},
		//标记选重
		selectMarker({ config }) {
			const myViewer = this.$refs.viewer;
			if (config.type == 2) {
				setTimeout(() => {
					uDialogModal({ content: config?.content, pics: config?.pics, piMp3: config?.piMp3, type: true })
						.then(() => {
							console.log('成功逻辑');
						})
						.catch(err => {
							console.log('失败逻辑', err);
						});
				}, 0);
			} else if (config.type == 1) {
				myViewer.updateIndex('type', config.poiId);
			} else if (config.skip == 1) {
				myViewer.updateIndex('skip', config.skipIndex);
			} else if (config.skip == 2) {
				setTimeout(() => {
					uDialogModal({ content: config?.content, pics: config?.pics, piMp3: config?.piMp3, type: false })
						.then(() => {
							console.log('成功逻辑');
						})
						.catch(err => {
							console.log('失败逻辑', err);
						});
				}, 0);
			}
		},
		// 全屏方法
		fullScreen() {
			// 是否全屏，否为null
			let full = document.fullscreenElement;
			console.log(full);
			if (!full) {
				// document自带的全屏方法
				document.documentElement.requestFullscreen();
			} else {
				// document自带的推出全屏方法
				document.exitFullscreen();
			}
		}
	}
};
</script>
<style>
.ant-modal-footer {
	display: none;
}
.ant-modal-close-icon {
	color: #fff;
}
.ant-modal-content,
.ant-modal-body {
	background: none;
	height: 100%;
	position: relative;
}
</style>
<style scoped lang="scss">
:deep(.psv-gallery) {
	background: none;
	border: none;
	z-index: 88;
	pointer-events: none;
}
:deep(.psv-gallery-container) {
	justify-content: center;
}
:deep(.psv-gallery.psv-gallery--open) {
	transform: translateY(-150px) !important;
}
:deep(.psv-gallery-item) {
	pointer-events: auto;
}
:deep(.psv-gallery-item::after) {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	border: 3px solid white;
	z-index: 3;
}
:deep(.psv-gallery-item--active::after) {
	/*  rgb(246, 166, 0) */
	border-color: rgb(246, 166, 0);
}

:deep(.psv-gallery-item-title) {
	bottom: 0;
	top: auto;
	font-size: 12px;
}

:deep(.psv-gallery-item:hover .psv-gallery-item-title) {
	height: 2.2em;
}
.photo-sphere-bottom {
	width: 100%;
	height: 100px;
	position: absolute;
	bottom: 0;
	display: flex;
	justify-content: center;
	align-items: end;
	pointer-events: fill;
	z-index: 100;
	.img-bottom {
		width: 1350px;
		height: 90px;
	}
	.photo-sphere-menu {
		display: flex;
		justify-content: space-between;
		align-items: end;
		position: absolute;
		width: 600px;

		top: -20px;
		div {
			display: flex;
			justify-content: space-between;
			align-items: center;
			color: #ffffff;
			flex-direction: column;

			img {
				width: 57px;
				height: 57px;
			}
		}
		& > div:nth-of-type(1),
		& > div:nth-of-type(5) {
			transform: translateY(30px);
		}
		& > div:nth-of-type(2),
		& > div:nth-of-type(4) {
			transform: translateY(10px);
		}
	}
}
.photo-sphere-bird {
	position: absolute;
	right: 20px;
	top: 50%;
	transform: translateY(-50px);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	span {
		position: absolute;
		top: 55px;
		width: 20px;
		font-size: 16px;
		line-height: 25px;
		color: #ffffff;
		text-align: center;
	}
}
.box-wrap {
	width: 100%;
	height: 100%;
	background-color: #60151a;

	.box-wrap-title {
		width: 100%;
		height: 30px;
		line-height: 30px;
		text-align: center;
		color: #d5c7a6;
		background-image: url('../../../assets/dTitle.png');
	}

	.box-wrap-content {
		height: 100%;
		padding: 20px;
		color: #ffffff;

		.box-wrap-content-message {
			height: 100%;
			img {
				width: 100%;
				height: 75%;
				margin-bottom: 10px;
			}
		}

		.box-wrap-content-skip {
			width: 100%;
			display: flex;
			justify-content: space-evenly;
			margin-top: 20px;

			div {
				width: 131px;
				height: 37px;
				line-height: 37px;
				text-align: center;
				background: #fff6d1;

				border-radius: 6px;
				color: #631f25;
			}
		}
	}
}
</style>
